<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com"></script>
    <title>Backgrounds & Shadows</title>
  </head>
  <body>
    <!-- Background Classes -->
    <div class="h-64 w-80 bg-cover bg-center" style="background-image: url(../assets/img/img2.jpg)"></div>
    <!-- Gradients -->
    <div class="h-24 bg-gradient-to-r from-cyan-200 to-blue-700"></div>
    <!-- Shadows -->
    <div class="w-96 mt-6 ml-4 p-3 shadow">
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nesciunt, autem odit? Nisi eveniet reiciendis et
      exercitationem accusantium? Repellat corporis neque eius aut quam quaerat totam nihil voluptatibus quis. Id,
      saepe.
    </div>
    <div class="w-96 mt-6 ml-4 p-3 shadow-md shadow-pink-200">
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nesciunt, autem odit? Nisi eveniet reiciendis et
      exercitationem accusantium? Repellat corporis neque eius aut quam quaerat totam nihil voluptatibus quis. Id,
      saepe.
    </div>
    <div class="w-96 mt-6 ml-4 p-3 shadow-2xl shadow-blue-400 rounded-2xl">
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nesciunt, autem odit? Nisi eveniet reiciendis et
      exercitationem accusantium? Repellat corporis neque eius aut quam quaerat totam nihil voluptatibus quis. Id,
      saepe.
    </div>
    <div class="w-96 mt-6 ml-4 p-3 shadow-lg shadow-green-300">
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nesciunt, autem odit? Nisi eveniet reiciendis et
      exercitationem accusantium? Repellat corporis neque eius aut quam quaerat totam nihil voluptatibus quis. Id,
      saepe.
    </div>
    <div class="w-96 mt-6 ml-4 p-3 shadow-inner shadow-purple-500">
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nesciunt, autem odit? Nisi eveniet reiciendis et
      exercitationem accusantium? Repellat corporis neque eius aut quam quaerat totam nihil voluptatibus quis. Id,
      saepe.
    </div>
    <!-- Mix Blend -->
    <div class="flex justifty-center -space-x-24">
      <div class="mix-blend-multiply bg-yellow-300">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus dolore doloribus qui commodi aliquam laudantium
        consequatur excepturi nemo non aliquid?
      </div>
      <div class="mix-blend-multiply bg-blue-300">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Libero enim quibusdam rem deleniti, error dolorum
        nesciunt. Temporibus fuga doloremque quaerat.
      </div>
    </div>
  </body>
</html>

<!-- Background Size
  bg-auto	    background-size: auto;
  bg-cover	  background-size: cover;
  bg-contain	background-size: contain;
-->

<!-- Background Repeat
  bg-repeat	      background-repeat: repeat;
  bg-no-repeat	  background-repeat: no-repeat;
  bg-repeat-x	    background-repeat: repeat-x;
  bg-repeat-y	    background-repeat: repeat-y;
  bg-repeat-round	background-repeat: round;
  bg-repeat-space	background-repeat: space;
-->

<!-- Background Position
  bg-bottom	      background-position: bottom;
  bg-center	      background-position: center;
  bg-left	        background-position: left;
  bg-left-bottom	background-position: left bottom;
  bg-left-top	    background-position: left top;
  bg-right	      background-position: right;
  bg-right-bottom	background-position: right bottom;
  bg-right-top	  background-position: right top;
  bg-top	        background-position: top;
-->

<!-- Background Attachment
  bg-fixed	  background-attachment: fixed;
  bg-local	  background-attachment: local;
  bg-scroll	  background-attachment: scroll;
-->

<!-- 
  Shadows
  shadow-sm	    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  shadow	      box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  shadow-md	    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  shadow-lg	    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  shadow-xl	    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  shadow-2xl	  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  shadow-inner	box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  shadow-none	  box-shadow: 0 0 #0000;
 -->
